<!-- 货架货物管理 -->
<template>
<div class="content-box">
  <div style="display: flex;">
    <FilterBox
      style="flex: 1;"
      :filterItemList="filterItemList"
      :filterData="filterData"
      @search="search"
      @clear="clear"
      @keep="keepHeaderList"
    >
    </FilterBox>
    <div style="min-height: 38px;margin-bottom: 15px;line-height:38px;background-color: #EBEEF3;padding:3px 10px;">
      <el-popover popper-class="headerCity" placement="bottom" trigger="click" ref="popoverRefCity" @hide="CityHide">
        <div>
          <el-input
            style="margin-bottom:4px;"
            @input="filterCityInput"
            v-model="filterCity"
          ></el-input>
        </div>
        <ul style="margin: 0;height:300px;overflow:auto;">
          <li
            :style="{backgroundColor:current_city_id == item.id? '#fff065': '#fff',}"
            class="city_btn_style"
            v-for="item in CityList"
            :key="item.id"
            @click="selectCity(item)"
          >
            {{ item.name_current }}
          </li>
        </ul>
        <span style="color: #6c9ee5 ; cursor: pointer" slot="reference"
          >[{{ current_city_name }}]</span
        >
      </el-popover>
    </div>
  </div>
  <MyTable
    :tableColumn="tableColumn"
    :tableData="tableData"
    @sendTabClick="setCurrent"
    :isOrder="false"
    >
    <template v-slot:content="scope">
      <span>{{ scope.row[scope.config.prop] }}</span>
    </template>
  </MyTable>
  <!-- 分页组件 -->

  <Pagination
    :currentPage="pageinfo.page"
    :pageSize="pageinfo.limit"
    :total="pageinfo.number_all"
    :page_all="pageinfo.page_all"
    @pagination="SetPagination"
    @sendPushButton="pushButton"
  >
  </Pagination>

  <GoodsListed
    @success="getTableData"
    ref="goodsListed"
  ></GoodsListed>
</div>
</template>

<script>
import GoodsListed from "./ShelfGoodsManagement_goods";
export default {
  components: {
    GoodsListed,
  },
  data(){
    return{
      CityList:[],
      current_city_id:'',
      current_city_name:'',
      filterCity:'',

      filterItemList:[
        // input输入框
        { label:this.$t('ShelfManagementLang.tracking_number'),width:200, filterKey: 'express_sn', filterType: 'SearchInput', placeholderStr: null },
        // input输入框
        { label:this.$t('ShelfManagementLang.Ticket_number'),width:200, filterKey: 'ticket_num', filterType: 'SearchInput', placeholderStr: null },
        // input输入框
        { label:this.$t('ShelfManagementLang.consignee_name'),width:200, filterKey: 'pickup_name', filterType: 'SearchInput', placeholderStr: null },
        // input输入框
        { label:this.$t('ShelfManagementLang.consignee_number'),width:200, filterKey: 'pickup_tel', filterType: 'SearchInput', placeholderStr: null },
        // 下拉框
        { label:this.$t('ShelfManagementLang.payment_status'),width:200, filterKey: 'pay_status', filterType: 'SearchSelect', placeholderStr: null, filterOptions: {options:[],label:'name',value:'id'} },
      ],
      filterData:{
        page: "",
        limit: "30",
        
        address:'',
        express_sn: "",
        ticket_num: "",
        pickup_name:'',
        pickup_tel: "",
        pay_status: "",
      },
      paymentoptions:[],
      tableColumn: [
        {
          label: "",
          prop: "table_code",
          width:40,
        },
        {
          checked: true,
          label: this.$t('ShelfManagementLang.tracking_number'),
          prop: "express_sn",
          width: 100,
        },
        {
          checked: true,
          label: this.$t('ShelfManagementLang.package_number'),
          prop: "package_sn",
          width: 200,
        },
        {
          checked: true,
          label: this.$t('ShelfManagementLang.Ticket_number'),
          prop: "ticket_num",
          width: 100,
        },
        {
          checked: true,
          label: this.$t('ShelfManagementLang.current_shelf_num'),
          prop: "shelves_number",
          width: 100,
        },
        {
          checked: true,
          label: this.$t('ShelfManagementLang.consignee_name'),
          prop: "pickup_name",
          width: 100,
        },
        {
          checked: true,
          label: this.$t('ShelfManagementLang.consignee_number'),
          prop: "pickup_tel",
          width: 100,
        },
        {
          checked: true,
          label: this.$t('ShelfManagementLang.destination'),
          prop: "target_local_name",
          width: 100,
        },
        {
          checked: true,
          label: this.$t('ShelfManagementLang.shipping_fee'),
          prop: 'freight_cost',
          width: 100,
        },
        {
          checked: true,
          label: this.$t('ShelfManagementLang.payment_status'),
          prop: "pay_status_name",
          width: 100,
        },
        
      ],
      tableData: [],

      pageinfo: {
        page: 1,
        page_all: 1,
        limit: 30,
        number_all: 0,
      },
      sendDataObj:{},
    }
  },
  computed: {
      tabsId() {
          return this.$store.state.tabsId;
      }
  },
  mounted(){
    this.getHeaderList()
    this.getOptionsList()
    this.getCityList()
  },
  methods:{

    // 获取下拉单列表
   async getOptionsList() {
      await this.$get("billSysItems").then((res) => {
        this.paymentoptions = res.data.order_pay_type;
      });
      this.filterItemList=[
        // input输入框
        { label:this.$t('ShelfManagementLang.tracking_number'),width:200, filterKey: 'express_sn', filterType: 'SearchInput', placeholderStr: null },
        // input输入框
        { label:this.$t('ShelfManagementLang.Ticket_number'),width:200, filterKey: 'ticket_num', filterType: 'SearchInput', placeholderStr: null },
        // input输入框
        { label:this.$t('ShelfManagementLang.consignee_name'),width:200, filterKey: 'pickup_name', filterType: 'SearchInput', placeholderStr: null },
        // input输入框
        { label:this.$t('ShelfManagementLang.consignee_number'),width:200, filterKey: 'pickup_tel', filterType: 'SearchInput', placeholderStr: null },
        // 下拉框
        { label:this.$t('ShelfManagementLang.payment_status'),width:200, filterKey: 'pay_status', filterType: 'SearchSelect', placeholderStr: null, filterOptions: {options:this.paymentoptions,label:'name',value:'id'} },
      ]
    },
    //查询
    search(){
      this.getTableData()
    },
    //清空
    clear(){
      this.filterData.express_sn= "",
      this.filterData.ticket_num= "",
      this.filterData.pickup_name= "",
      this.filterData.pickup_tel= "",
      this.filterData.pay_status= "",
      this.getTableData()
    },
    // 获取表头组
    getHeaderList(){
      this.$get("get_th",{menu_id:this.tabsId}).then((res) => {
        if(!!res.data.th_json){
          this.tableColumn=JSON.parse(res.data.th_json)
        }
      });
    },
    //保存表头表头组
    keepHeaderList(){
        let params = new FormData();
        params.append("menu_id", this.tabsId);
        params.append("th_json", JSON.stringify(this.tableColumn));
        this.$postForm("save_th", params).then((res) => {
          
        });
    },
    // 更改分页
    SetPagination(data){
      this.filterData.page=data.page
      this.filterData.limit=data.limit
      this.pageinfo.page=data.page
      this.pageinfo.limit=data.limit
      this.getTableData()
    },
    pushButton(route) {
        if (route == "GoodsListed") {
            this.$refs.goodsListed.init(true);
        } else if (route == "GoodsPickup") {
            this.$refs.goodsListed.init(false);
        }
    },
    // 获取表格数据
    getTableData(){
      this.$get("getShelvesPackageList", this.filterData).then((res) => {
        this.tableData = res.data;
        this.pageinfo = res.pageinfo;
        this.pageinfo.limit=Number(this.pageinfo.limit)
        this.sendDataObj={}
      });
    },
    setCurrent(data){
      this.sendDataObj=data
    },
    async getCityList() {
      await this.$get("getMyAddress").then((res) => {
          this.OldCityList = res.data.list;
          this.CityList=JSON.parse(JSON.stringify(this.OldCityList)) 
      });
      this.$get("getMemberLocal").then((res) => {
          if(this.OldCityList.length>0){
              this.current_city_id = res.data.lid;
              if(this.OldCityList.filter(el=>{return el.id==this.current_city_id}).length>0){
                  this.current_city_name= this.OldCityList.filter(el=>{return el.id==this.current_city_id})[0].name_current
              }else{
                  this.current_city_id =this.OldCityList[0].id
                  this.current_city_name=this.OldCityList[0].name_current
                  this.selectCity({id:this.current_city_id})
              }
          }else{
              this.current_city_id =''
              this.current_city_name=''
          }
          this.filterData.address=this.current_city_id
          this.getTableData()
      });
    },
    //选择城市
    selectCity(data) {
      this.current_city_id = data.id;
      this.current_city_name= this.OldCityList.filter(el=>{return el.id==this.current_city_id})[0].name_current
      this.filterData.address=this.current_city_id
      this.$refs.popoverRefCity.doClose();
      this.getTableData()
      let params = new FormData();
        params.append("lid", data.id);
      this.$postForm("saveMemberLocal", params).then((res) => {});
    },
    filterCityInput(){
        this.CityList=[]
        this.OldCityList.forEach(item => {
            if(item.name_current.includes(this.filterCity)){
            this.CityList.push(item)
            }
        });
    },
    CityHide(){
        this.filterCity=''
        this.CityList=JSON.parse(JSON.stringify(this.OldCityList))
    },
  }
}
</script>
<style scoped lang="less">
.tableBox {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
</style>